<div class="content">
    <div id="example_title">
        <h1>Common Dialogs</h1>
        There are 3 standard dialogs that you can use out of the box: w2alert(), w2confirm(), and w2prompt();
    </div>
    <div id="example_view"></div>
    <div id="example_code"></div>
</div>

<!--CODE-->
<button id="showAlert" class="w2ui-btn">Alert</button>
<button id="showConfirm" class="w2ui-btn">Confirm</button>
<button id="showPrompt" class="w2ui-btn">Prompt 1.5+</button>

<!--CODE-->
<script type="module">
import { w2alert, w2confirm, w2prompt, w2utils, query } from '__W2UI_PATH__'

query('#showAlert').on('click', showAlert)
query('#showConfirm').on('click', showConfirm)
query('#showPrompt').on('click', showPrompt)

function showAlert() {
    w2alert('message')
        .ok(() => { console.log('ok') })
}

function showConfirm() {
    w2confirm('message')
        .yes(() => { console.log('yes') })
        .no(() => { console.log('no') })
}

function showPrompt() {
    w2prompt({
        title: w2utils.lang('Notification'),
        width: 400,
        height: 200,
        label: 'Enter',
        value: 'a',
        attrs: 'style="width: 200px" placeholder="Type here..."',
        btn_ok: {
            text: 'Ok',
            class: 'ok-class',
            style: 'color: green'
        },
        btn_cancel: {
            text: 'Cancel',
            class: 'ok-class'
        },
    })
    .change((event) => {
        console.log('change', event.detail.originalEvent.target.value)
    })
    .ok((event) => {
        console.log('ok, value=', event.detail.value)
    })
    .cancel((event) => {
        console.log('cancel')
    })
}
</script>
